<template>
  <scaleBox1 class="scale-wrap" :width="1920" :height="1080">
    <div class="container">
      <el-container
        class="container2"
        :style="{
          // width: width + 'px',
          // height: height + 'px',
        }"
      >
        <el-header class="header">
          <span>四川省电碳因子</span>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
  </scaleBox1>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import scaleScreen from "@/components/scaleScreen/index.vue";
import scaleBox from "@/components/scaleBox/index.vue";
import scaleBox1 from "@/components/scaleBox/SacleBox.vue";

export default {
  components: {
    scaleScreen,
    scaleBox,
    scaleBox1,
  },
  setup() {
    const width = ref(1920);
    const height = ref(1080);

    const dateTime = ref("2024年10月15日");
    const size = ref("default");
    const activeIndex = ref("/");
    const router = useRouter();
    let dateTimeShow = ref(true);

    const handleSelect = (key) => {
      activeIndex.value = key;
      router.push(key); // 通过vue-router导航
      dateTimeShow.value = key === "/emission" ? false : true;
    };
    // 选中的日期
    const handleDateChange = (value) => {
      dateTime.value = value;
    };
    return {
      activeIndex,
      handleSelect,
      dateTime,
      size,
      handleDateChange,
      width,
      height,
      dateTimeShow,
    };
  },
};
</script>

<style lang="scss">
.el-input__inner {
  cursor: pointer;
}
:root {
  --el-popper-bg-color: rgba(4, 12, 35, 0.63); /* 定义新变量 */
}
.dateStyLayer {
  position: absolute;
  right: 216px;
  bottom: 26px;
  .dateSty {
    cursor: pointer;
    position: relative;
    .pickerSty {
      opacity: 0;
      z-index: 99;
      position: absolute;
    }
    .dateSpan {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      position: absolute;
      top: 11px;
      width: 220px;
    }
    .dateSpan b {
      margin-left: 5px;
      font-size: 16px;
      position: relative;
      top: 2px;
      background: linear-gradient(
        to right,
        #cff6ff 0%,
        #5bf2ff 60%,
        #0598ff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-style: normal;
      font-family: "MiSans-Medium";
      letter-spacing: 0;
    }
  }
}

.container {
  /* --header-hight: 100px; */
  height: 100%;
  width: 100%;
  background: #03213d;
  background-image: url("./assets/imgs/no-compress/bga.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.container2 {
  /* --header-hight: 100px; */
  height: 100%;
  width: 100%;
  background-image: url("./assets/imgs/no-compress/bga-border.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.header {
  height: 80px !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: "阿里妈妈数黑体";
  font-weight: bold;
  font-size: 36px;
  letter-spacing: 5px;
  transform: skewX(-3deg); /* 水平倾斜10度 */
}
.fixed-menu {
  position: fixed;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.el-menu-demo {
  display: flex;
  justify-content: center; /* 让菜单居中 */
  width: 700px;
  .el-menu-item {
    position: relative; /* 保证伪元素相对于这个容器定位 */
    width: 114px;
    height: 119px !important;
    background: url("./assets/imgs/tabWXZ.png") no-repeat center;
    background-size: 100% 100%;
    font-size: 20px;
    font-weight: 400;
    color: #fff !important;
    font-family: "优设标题";
    transform: skewX(-3deg);
    padding-left: 100px;
  }
  .el-menu-item .ta1 {
    position: relative;
    z-index: 10; /* 确保文字位于背景图的上方 */
    background: linear-gradient(to right, #dcfffb 13%, #c0e5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .el-menu-item:after {
    content: "";
    position: absolute;
    bottom: 16px;
    left: -62px;
    right: 0px;
    width: 326px;
    height: 33px;
    z-index: 5; /* 放在文字下方 */
  }
  .el-menu-item:nth-child(1) {
    position: relative;
    bottom: 45px;
  }
  .el-menu-item:nth-child(3) {
    position: relative;
    bottom: 45px;
    /* right:100px; */
  }
}
.el-menu--horizontal > .el-menu-item.is-active {
  background: url("./assets/imgs/tabXZ.png") no-repeat center;
  border-bottom: none !important;
  .ta1 {
    background: linear-gradient(to right, #dcfffb 26%, #40f1dc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.el-menu-item.is-active:after {
  background: url("./assets/imgs/tabXZT.png") no-repeat center;
  background-size: contain; /* 保证背景图不失真 */
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background: url("./assets/imgs/tabXZ.png") no-repeat center !important;
  background-color: transparent !important;

  span {
    background: linear-gradient(to right, #dcfffb 26%, #40f1dc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.el-menu--horizontal {
  justify-content: space-between;
}

.el-menu {
  background: none !important;
  border-bottom: none !important;
}
.el-main {
  padding: 0 !important;
  margin-top: 27px;
}

:root {
  --el-dropdown-menu-bg-color: rgba(11, 134, 171, 0.8);
  --el-dropdown-menu-text-color: rgba(54, 44, 49, 0.48);
  --el-dropdown-menu-select-text-color: #5ac4c1;
  --el-dropdown-menu-hovering-text-color: rgba(106, 145, 203, 0.5);
  --el-dropdown-menu-border-text-color: rgba(48, 64, 102, 0.48);
  --el-dropdown-menu-item-text-color: #f3f7ff;
  --el-dropdown-menu-item-table-td: #a3d5e9; //99d5ec
}

.el-popper,
.el-picker-panel {
  background-color: var(--el-dropdown-menu-bg-color) !important;
  color: var(--el-dropdown-menu-text-color) !important;
}
.el-select-dropdown__item.is-selected {
  color: var(--el-dropdown-menu-select-text-color) !important;
}
.el-select-dropdown__item,
.el-date-picker__header-label,
.el-date-table th,
.el-picker-panel__icon-btn .el-icon,
.el-year-table td .el-date-table-cell__text,
.el-month-table td .el-date-table-cell__text {
  color: var(--el-dropdown-menu-item-text-color) !important;
}
.el-select-dropdown__item.is-hovering {
  background-color: var(--el-dropdown-menu-hovering-text-color) !important;
}
.el-popper.is-light,
.el-popper.is-light > .el-popper__arrow:before {
  background: var(--el-dropdown-menu-bg-color) !important;
  border: 1px solid var(--el-dropdown-menu-border-text-color) !important;
}
.el-date-table td {
  color: var(--el-dropdown-menu-item-table-td);
}

</style>
